<template>
	<div :class="{active:isActive}" class="share-dropdown-menu">
		<div class="share-dropdown-menu-wrapper">
			<span class="share-dropdown-menu-title" @click.self="clickTitle">{{ title }}</span>
			<div v-for="(item,index) of items" :key="index" class="share-dropdown-menu-item">
				<a v-if="item.href" :href="item.href" target="_blank">{{ item.title }}</a>
				<span v-else>{{ item.title }}</span>
			</div>
		</div>
	</div>
</template>

<script>
	module.exports = {
		props: {
			items: {
				type: Array,
				default: function () {
					return []
				}
			},
			title: {
				type: String,
				default: 'vue'
			}
		},
		data() {
			return {
				isActive: false
			}
		},
		methods: {
			clickTitle() {
				this.isActive = !this.isActive
			}
		}
	}
</script>

<style>
	.share-dropdown-menu {
		width: 250px;
		position: relative;
		z-index: 1;
	}

	.share-dropdown-menu-title {
		width: 100%;
		display: block;
		cursor: pointer;
		background: black;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
		text-align: center;
		z-index: 2;
		transform: translate3d(0, 0, 0);
	}

	.share-dropdown-menu-wrapper {
		position: relative;
	}

	.share-dropdown-menu-item {
		text-align: center;
		position: absolute;
		width: 100%;
		background: #e0e0e0;
		line-height: 60px;
		height: 60px;
		cursor: pointer;
		font-size: 20px;
		opacity: 1;
		transition: transform 0.28s ease;
	}

		.share-dropdown-menu-item:hover {
			background: black;
			color: white;
		}

		.share-dropdown-menu-item:nth-of-type(1) {
			z-index: -1;
			transition-delay: 0.1s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(2) {
			z-index: -1;
			transition-delay: 0.2s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(3) {
			z-index: -1;
			transition-delay: 0.3s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(4) {
			z-index: -1;
			transition-delay: 0.4s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(5) {
			z-index: -1;
			transition-delay: 0.5s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(6) {
			z-index: -1;
			transition-delay: 0.6s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(7) {
			z-index: -1;
			transition-delay: 0.7s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(8) {
			z-index: -1;
			transition-delay: 0.8s;
			transform: translate3d(0, -60px, 0);
		}

		.share-dropdown-menu-item:nth-of-type(9) {
			z-index: -1;
			transition-delay: 0.9s;
			transform: translate3d(0, -60px, 0);
		}

	.share-dropdown-menu.active .share-dropdown-menu-wrapper {
		z-index: 1;
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(1) {
		transition-delay: 0.8s;
		transform: translate3d(0, 0px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(2) {
		transition-delay: 0.7s;
		transform: translate3d(0, 60px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(3) {
		transition-delay: 0.6s;
		transform: translate3d(0, 120px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(4) {
		transition-delay: 0.5s;
		transform: translate3d(0, 180px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(5) {
		transition-delay: 0.4s;
		transform: translate3d(0, 240px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(6) {
		transition-delay: 0.3s;
		transform: translate3d(0, 300px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(7) {
		transition-delay: 0.2s;
		transform: translate3d(0, 360px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(8) {
		transition-delay: 0.1s;
		transform: translate3d(0, 420px, 0);
	}

	.share-dropdown-menu.active .share-dropdown-menu-item:nth-of-type(9) {
		transition-delay: 0s;
		transform: translate3d(0, 480px, 0);
	}
</style>
